<template>
  <!-- 预警决策主页-带电检测部分立体圆柱图表 -->
  <div class="chargebar">
    <v-chart :options="newOption" :auto-resize="true" @click="chartClick" />
  </div>
</template>
<script lang="ts">
import { Component, Prop, Vue, Watch } from "vue-property-decorator";
import { EChartOption } from "echarts";
import echarts from "echarts";
//loadsh
import lodash from "lodash";
// interface color {
//   x: string;
//   value: string;
// }
@Component
export default class ChargeBar extends Vue {
  // 带电检测异常装备数据
  @Prop({ default: () => [] })
  electricData;
  // 当前地市信息
  @Prop({ default: () => [] })
  CurrentOrg;
  public option: EChartOption = {
    // backgroundColor: "#031245",
    color: ["#0080FF", "#49beff", "RGB(24,82,162)", "RGB(24,82,162)"],
    grid: {
      containLabel: true,
      left: 0,
      right: 20,
      bottom: 10,
      top: 40,
    },
    xAxis: {
      type: "category",
      offset: 7,
      axisLabel: {
        color: "#c0c3cd",
        fontSize: 14,
        interval: 0, //强制显示文字
      },
      splitLine: {
        show: false,
      },
      axisLine: {
        lineStyle: {
          color: "#384267",
          width: 1,
          type: "dashed",
        },
        show: false,
      },
      data: [
        "开关柜\n超声波",
        "开关柜\n暂态地",
        "红外测温",
        "GIS特高频",
        "GIS超声波",
      ],
    },
    yAxis: {
      show: false,
      axisLabel: {
        color: "#c0c3cd",
        fontSize: 14,
        // show: false
      },
      splitLine: {
        show: true,
        lineStyle: {
          color: "#384267",
          type: "dashed",
        },
      },
      axisLine: {
        lineStyle: {
          color: "#384267",
          width: 1,
          type: "dashed",
        },
        show: true,
      },
    },
    series: [
      {
        // 实柱
        data: [200, 85, 112, 275, 305],
        type: "bar",
        // barMaxWidth: "auto",
        barWidth: 30,
        itemStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: "#0191FD",
              },
              {
                offset: 1,
                color: "#04B3F3",
              },
            ]),
            // barBorderRadius: 12,
          },
        },
        label: {
          show: true,
          position: [-35, 5],
          distance: 10,
          color: "green",
        },
      },
      {
        // 实底
        data: [1, 1, 1, 1, 1],
        type: "pictorialBar",
        barMaxWidth: "20",
        symbol: "circle",
        symbolOffset: [0, "50%"],
        symbolSize: [30, 15],
      },
      {
        // 实顶
        data: [200, 85, 112, 275, 305],
        type: "pictorialBar",
        barMaxWidth: "20",
        symbolPosition: "end",
        symbol: "circle",
        symbolOffset: [0, "-50%"],
        symbolSize: [30, 12],
        zlevel: 2,
      },
      {
        // 虚柱
        data: [741, 741, 741, 741, 741],
        type: "bar",
        // barMaxWidth: "auto",
        barWidth: 30,
        barGap: "-100%",
        zlevel: -1,
        label: {
          show: true,
          position: "top",
          distance: 10,
          color: "#ffffff",
        },
      },
      // {
      //   // 虚底 #03387a
      //   data: [1, 1, 1, 1, 1],
      //   type: "pictorialBar",
      //   barMaxWidth: "20",
      //   symbol: "circle",
      //   symbolOffset: [0, "50%"],
      //   symbolSize: [30, 15],
      //   // zlevel: -2
      // },
      {
        // 虚顶
        data: [741, 741, 741, 741, 741],
        type: "pictorialBar",
        barMaxWidth: "20",
        symbolPosition: "end",
        symbol: "circle",
        symbolOffset: [0, "-50%"],
        symbolSize: [30, 12],
        zlevel: -1,
      },
    ],
    tooltip: {
      trigger: "item",
      show: false,
    },
  };
  public chartClick(val:any): void {
    if (val.dataIndex === 0) {
      this.goAlarmPage('3');
    } else if (val.dataIndex === 1) {
      this.goAlarmPage('4');
    } else if (val.dataIndex === 2) {
      this.goAlarmPage('0');
    } else if (val.dataIndex === 3) {
      this.goAlarmPage('2');
    } else if (val.dataIndex === 4) {
      this.goAlarmPage('1');
    }
  }

  // 开关柜超声波/开关柜暂态地/红外测温/GIS特高频/GIS超声波跳转页面
  private goAlarmPage(tail: string) {
    let url = "http://10.193.23.21:28883/epribigdata/jsp/tg_zt/xyddjc/ycsb.jsp?jczt=0&ssds=";
    if (this.newCurrentOrg.SSDSBM == "8a1ea5c64bdebad1014bdebc4cbf0001") {
      //省公司
      window.open(url + null + "&jclx=" + tail);
    } else {
      //地市公司
      window.open(url + this.newCurrentOrg.SSDSBM + "&jclx=" + tail);
    }
  }

  get newCurrentOrg() {
    let CurrentOrg = this.CurrentOrg;
    return CurrentOrg;
  }

  get newOption() {
    let option = lodash.cloneDeep(this.option);
    let robotInspection = this.electricData;
    console.log('robotInspection:',robotInspection);
    
    let zcData = [
      robotInspection[1].kggcsb,
      robotInspection[1].kggztd,
      robotInspection[1].hwcw,
      robotInspection[1].gistgp,
      robotInspection[1].giscsb,
    ];
    let totalData = [
      robotInspection[3].kggcsbcd,
      robotInspection[3].kggztdcd,
      robotInspection[3].hwcwcd,
      robotInspection[3].gistgpcd,
      robotInspection[3].giscsbcd,
    ];
    (option as any).series[0].data = zcData;
    (option as any).series[2].data = zcData;
    (option as any).series[3].data = totalData;
    (option as any).series[4].data = totalData;
    return option;
  }
}
</script>
<style lang="scss" scoped>
.chargebar {
  width: 100%;
  height: 100%;
  .echarts {
    width: 100%;
    height: 100%;
  }
}
</style>
